<script lang="ts" setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { trainingGetCourseTable, trainingGetCourseTableByDate } from '/api/timetable'

const calendarRef = ref()

const selected = ref([])
async function getData(time: string) {
  const res = await trainingGetCourseTable(time)
  selected.value = res?.data?.map(date => ({ date })) || [];
}

const list = ref([]);
async function onChange(e) {
  const { date } = e.extraInfo
  if (!date) {
    list.value = [];
    return
  }
  const res = await trainingGetCourseTableByDate({ date })
  list.value = res.data || [];
}

function monthSwitch({ year, month }) {
  month = Number(month)
  getData(`${year}-${month < 10 ? '0' + month : month}`)
}
onShow(async () => {
  await Promise.resolve()
  const { calendar, nowDate } = calendarRef.value!
  onChange({
    extraInfo: {
      date: calendar.fullDate
    }
  })
  getData(`${nowDate.year}-${nowDate.month}`)
})
</script>

<template>
  <view class="T_page" :style="`padding-top:${uni.$statusBarHeight}px`">
    <uni-calendar ref="calendarRef" :selected="selected" @change="onChange" @monthSwitch="monthSwitch" />
    <view class="list">
      <view v-for="item in list" :key="item.id"
        @click="uni.navigateTo({ url: `/pages/courseDetail/index?id=${item.id}` })">
        <view class="title">{{ item.trainingTheme || "--" }}</view>
        <view class="time">
          <image src="/static/svg/time.svg" />
          <text>{{ item.startTime }}{{ item.endTime }}</text>
        </view>
        <view class="address">
          <uni-icons type="location-filled" :size="uni.$rpxToPx(24)" color="#6B7280" />
          <text>{{ item.trainingAddress || "--" }}</text>
        </view>
        <view class="user">
          <uni-icons type="person-filled" :size="uni.$rpxToPx(24)" color="#6B7280" />
          <text>{{ item.trainingExpert || "--" }}</text>
          <uni-icons type="right" :size="uni.$rpxToPx(30)" color="#D1D5DB" />
        </view>
      </view>
      <image class="empty" src="/static/svg/empty.svg" v-if="list.length === 0" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.T_page:deep() {
  .uni-calendar__content {
    background-color: transparent;
  }

  .uni-calendar__header {
    height: 44px;
    border-bottom: none;
  }

  .uni-calendar__header-btn-box {
    height: 44px;

    .uni-calendar__header-btn {
      width: 7px;
      height: 7px;
      border-color: #9CA3AF;
    }
  }

  .uni-calendar__backtoday {
    display: none;
  }

  .uni-calendar__box {
    background-color: #fff;
    border-radius: 20rpx;
  }

  .uni-calendar-item__weeks-box {
    border-radius: 20rpx;
  }
}

.T_page {
  display: grid;
  grid-template-rows: auto 1fr;
}

.list {
  overflow-y: auto;
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  gap: 20rpx;

  >view {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;

    >view {
      display: flex;
      align-items: center;
      gap: 14rpx;
      font-size: 24rpx;
      color: #6B7280;

      &+view {
        margin-top: 14rpx;
      }

      >image {
        width: 24rpx;
        height: 24rpx;
      }
    }

    >.title {
      font-size: 28rpx;
      color: #1f2937;

      &::before {
        flex-shrink: 0;
        content: '';
        width: 14rpx;
        height: 14rpx;
        border-radius: 50%;
        background-color: #3b82f6;
        margin: 0 5rpx;
      }
    }

    >.user {
      >text {
        margin-right: auto;
      }
    }
  }
}

.empty {
  display: block;
  margin: 100rpx auto;
  width: 300rpx;
  height: 300rpx;
}
</style>
